<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>抠图</title>
</head>

<body>
<style>
.hr{overflow:hidden;height:2px;background:#000000;margin:4px 0px;}
</style>
<form>
	<input type="file" id="imgs" multiple="true" value="">
	<input type="button" id="go" value="开始">
	<div class="hr"></div>
	全局修正<input type="number" id="img_globals" value="0">
	大图X<input type="number" id="img0_1x" value="85">
	大图Y<input type="number" id="img0_1y" value="100">
	<div class="hr"></div>
	<input type="number" id="img1_1x" value="714">
	<input type="number" id="img1_1y" value="333">
	<div class="hr"></div>
	<input type="number" id="img2_1x" value="715">
	<input type="number" id="img2_1y" value="448">
	<input type="number" id="img2_2x" value="835">
	<input type="number" id="img2_2y" value="448">
	<input type="number" id="img2_3x" value="955">
	<input type="number" id="img2_3y" value="448">
	<div class="hr"></div>
	<input type="reset" value="默认">
	<div class="hr"></div>
</form>
<div id="outbox">
</div>
<canvas id="img0_1" width="460" height="450"></canvas>
<canvas id="img1_1" width="86" height="86"></canvas>
<canvas id="img2_1" width="86" height="86"></canvas>
<canvas id="img2_2" width="86" height="86"></canvas>
<canvas id="img2_3" width="86" height="86"></canvas>

<script type="text/javascript">
function $(id){
	return document.getElementById(id);
}
function gv(id){
	return parseInt($(id).value,10);
}
function gvY(id){
	return (parseInt($(id).value,10) + parseInt($("img_globals").value,10));
}
var imgs = $("imgs");
var img0_1 = $("img0_1");
var img1_1 = $("img1_1");
var img2_1 = $("img2_1");
var img2_2 = $("img2_2");
var img2_3 = $("img2_3");
function ctx2d(c, d, w, h, nw, nh){
	c.width = w;
	c.height = h;
	var ctx = c.getContext('2d');
	ctx.putImageData(d,0,0);
	var i = new Image();
	i.src = c.toDataURL();
	i.onload = function(){
		c.width = nw;
		c.height = nh;
		ctx.drawImage(i, 0, 0, nw, nh);
	};
}
var outbox = $("outbox");
var ii = 0;
function draw(){
	var f = imgs.files[ii]
	if(f.type.indexOf("image/")==0){
		var fr = new FileReader();
		fr.readAsDataURL(f);
		fr.onload = function(ev){
			var d = ev.originalTarget.result;
			var i = new Image();
			i.src = d;
			i.onload = function(){
				var canvas = document.createElement("canvas");
				canvas.width=1280;
				canvas.height=720;
				var ctx = canvas.getContext('2d');
				ctx.drawImage(i, 0, 0);
				var imgbox = [];
				imgbox[0] = document.createElement("canvas");
				imgbox[1] = document.createElement("canvas");
				imgbox[2] = document.createElement("canvas");
				imgbox[3] = document.createElement("canvas");
				imgbox[4] = document.createElement("canvas");
				imgbox[5] = document.createElement("div");
				imgbox[5].className = "hr";
				ctx2d(imgbox[0], ctx.getImageData(gv("img0_1x"), gv("img0_1y"), 460, 450), 460, 450, 286, 280);
				ctx2d(imgbox[1], ctx.getImageData(gv("img1_1x"), gvY("img1_1y"), 86, 86), 86, 86, 60, 60);
				ctx2d(imgbox[2], ctx.getImageData(gv("img2_1x"), gvY("img2_1y"), 86, 86), 86, 86, 60, 60);
				ctx2d(imgbox[3], ctx.getImageData(gv("img2_2x"), gvY("img2_2y"), 86, 86), 86, 86, 60, 60);
				ctx2d(imgbox[4], ctx.getImageData(gv("img2_3x"), gvY("img2_3y"), 86, 86), 86, 86, 60, 60);
				outbox.appendChild(imgbox[0]);
				outbox.appendChild(imgbox[1]);
				outbox.appendChild(imgbox[2]);
				outbox.appendChild(imgbox[3]);
				outbox.appendChild(imgbox[4]);
				outbox.appendChild(imgbox[5]);
				ii += 1;
				if(ii<iiend){
					draw();
				}else{
					imgs.value = "";
				}
			};
		};
	}else if(f.type.indexOf("text/")==0){
		var fr = new FileReader();
		fr.readAsText(f);
		fr.onload = function(ev){
			var str=ev.originalTarget.result;
			var output={},p;
			str.replace(/^(.*?)[:](.*)$|^.+$/gm,function(a,b,c){
				if(!!parseInt(b,10)){
					p=c;
					output[p]={};
				}else if(b=="可装备者"){
					output[p]["可装备者"]=c.split(",");
				}else if(b=="秘·奥义"){
					output[p]["秘·奥义"]=c;
				}else if(b=="匹配战魂"){
					output[p]["匹配战魂"]=c.split(",");
				}else{
					output[p]["奥义"]=a;
				}
			});
			console.log(output);
			outbox.innerHTML=JSON.stringify(output);
		};
	}
}
$("go").onclick = function(event){
	ii = 0;
	iiend = imgs.files.length;
	outbox.innerHTML = "";
	draw();
}
</script>
</body>
</html>
